<template>
  <div>
    <h4>生命周期</h4>
    <input type="text" v-model="msg">
  </div>
</template>

<script setup>
import { onBeforeMount, onBeforeUpdate, onMounted, onBeforeUnmount, onUnmounted, onUpdated, ref, onActivated, onDeactivated } from "vue";

const msg = ref("hi");

onBeforeMount(()=>{
  console.log("挂载之前")
});

onMounted(()=>{
  console.log("挂载之后")
});

onBeforeUpdate(()=>{
  console.log("更新之前")
})

onUpdated(()=>{
  console.log("更新之后")
})

onBeforeUnmount(()=>{
  console.log("卸载之前")
})

onUnmounted(()=>{
  console.log("卸载之后")
})

onActivated(()=>{
  console.log("组件激活")
})

onDeactivated(()=>{
  console.log("组件失活")
})

</script>